<template>
	<view class="all">
		<view class="sentence">时间是一切财富中最宝贵的财富</view>
		<view class="title-name">{{ state.switchtitle }}</view>
		<view class="login-resgin">
			<view class="Login-interface">
				<up-form :model="state" v-if="state.isShow">
					<view class="input-group">
						<view class="user-all-font">
							<view class="userName-font">用户名</view>
							<view class="userPassword-font">密码</view>
						</view>
						<view class="user-all-input">
							<up-input placeholder="请输入用户名" border="surround" v-model="state.username"></up-input>
							<up-input placeholder="请输入密码" border="surround" v-model="state.password"></up-input>
						</view>
					</view>
					<view class="bottom-btn">
						<up-button text="登录" size="large" color="#fb8648" shape="circle" @click="onSubmit"></up-button>
						<text class="register" @click="isLoginRegister">没有账号？点击注册</text>
					</view>
				</up-form>

				<form v-else>
					<view class="input-group">
						<view class="user-all-font">
							<view class="userPhone-font">手机号</view>
							<view class="userName-font">用户名</view>
							<view class="userPassword-font">密码</view>
							<view class="userPassword-font">确认密码</view>
						</view>
						<view class="user-all-input">
							<up-input placeholder="请输入手机号" border="surround" v-model="state.phone"></up-input>
							<up-input placeholder="请输入用户名" border="surround" v-model="state.username"></up-input>
							<up-input placeholder="请输入密码" border="surround" v-model="state.password"></up-input>
							<up-input placeholder="请再次输入密码" border="surround" v-model="state.password1"></up-input>
						</view>
					</view>
					<view class="bottom-btn">
						<up-button text="注册" size="large" color="#fb8648" shape="circle" @click="onSubmit"></up-button>
						<text class="register" @click="isLoginRegister">已有账号？点击登录</text>
					</view>
				</form>
			</view>
		</view>
		<view>
			<up-toast ref="uToastRef"></up-toast>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Login, Register } from '../../apis/api.js';

const show = ref(false);
const uToastRef = ref(null);

const state = reactive({
	isShow: true,
	username: '',
	password: '',
	password1: '',
	switchtitle: '欢迎登录',
	phone: ''
});

const toast = reactive({
	type: '',
	message: ''
});

// 创建响应式数据
// 存储用户的信息
function storeUserData(key, data) {
	uni.setStorage({
		key: key,
		data: data,
		success: function () {
			console.log(`${key}存储成功`);
		}
	});
}

// 点击登录，注册
// 注册有点小bug，头像，个性签名不能为空
const onSubmit = async () => {
	console.log(state);
	if (state.isShow) {
		Login({
			username: state.username,
			password: state.password
		}).then((res) => {
			if (res.msgType == 8000) {
				// 弹窗显示登录成功消息
				// 调用存储函数存入userId和token
				toast.type = 'success';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
				storeUserData('userId', res.data);
				storeUserData('token', res.token);
				// 跳转到首页
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home'
					});
				}, 3000);
			} else {
				toast.type = 'error';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
			}
			console.log('成功', res);
		});
	} else {
		// if (state.password == state.password1) {
		Register({
			username: state.username,
			password: state.password,
			phone: state.phone,
			againPassword: state.password1
		}).then((res) => {
			if (res.msgType == 8000) {
				toast.type = 'success';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
				state.isShow = true;
			} else {
				toast.type = 'error';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
			}
		});
	}
};

// 获取本地存储的userId
uni.getStorage({
	key: 'userId',
	success: function (res) {
		let userId = res.data;
		console.log('获取的userId为：', userId);
	},
	fail: function (error) {
		console.error('获取userId失败：', error);
	}
});

uni.getStorage({
	key: 'token',
	success: function (res) {
		let token = res.data;
		console.log('获取的token为：', token);
	},
	fail: function (error) {
		console.error('获取token失败：', error);
	}
});

// 切换登录和注册
const isLoginRegister = () => {
	state.isShow = !state.isShow;
	if (state.isShow) {
		state.switchtitle = '欢迎登录';
	} else {
		state.switchtitle = '欢迎注册';
	}
};
</script>

<style lang="less" scoped>
.all {
	width: 100%;
	height: 100vh;
	background-color: #f5f9fa;
	.sentence {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.title-name {
		font-size: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin: 10rpx 0 10rpx 0;
	}
	.login-resgin {
		padding: 20rpx;
		// border: 1px solid red;
		box-sizing: border-box;
		.Login-interface {
			height: 600rpx;
			width: 100%;
			border: 2px solid #ccc;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
			border-radius: 10px;
			background-color: #f9f9f9;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			.input-group {
				display: flex;
				.user-all-font {
					width: 20%;
					// border: 1px solid red;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
				}
				.user-all-input {
					// display: flex;
					width: 80%;
				}
			}
			.bottom-btn {
				padding-top: 30rpx;
				.register {
					display: block;
					color: gray;
					height: 10rpx;
					line-height: 10rpx;
					width: 100%;
					padding-top: 30rpx;
				}
			}
		}
	}
}
</style>
